<template>
  <div class="sale-funnel-card home-sale-card">
    <div class="sale-card-header">
      <span class="title">销售漏斗</span>
      <div class="date-select">
        <el-select v-model="date" @change="handleChangeDate">
          <el-option v-for="d in dateTypes" :key="d.value" :value="d.value" :label="d.label" />
        </el-select>
      </div>
    </div>
    <div @click="gotoFunnel">
      <saleFunnelChart ref="saleFunnelChart" />
    </div>
  </div>

</template>
<script>
import { dateTypes } from '@/utils/enums'

import saleFunnelChart from './saleFunnelChart.vue'
import { getsaleFunnel } from '@/api/chart'
import { saleStagesReport } from '@/utils/enums'
import BigNumber from 'bignumber.js'
import { setParams } from '@/utils/jump'
export default {
  name: 'SaleFunnelCard',
  components: { saleFunnelChart },
  data() {
    return {
      dateTypes,
      date: 7
    }
  },
  mounted() {
    // const curMonth = dayjs().format('YYYY年MM')
    this.getData()
  },
  methods: {
    handleChangeDate(v) {
      this.getData()
    },
    gotoFunnel() {
      // setParams({ dateType: this.date })
      this.gotoMainPage('report/funnel', { dateType: this.date })
    },
    getData() {
      getsaleFunnel({ searchType: this.date }).then((res) => {
      //
        const data = res
        const list = []
        saleStagesReport.forEach((item) => {
          var f = data.find((f) => f.saleStage === item.value)
          list.push({
            name: item.label,
            value: f ? BigNumber(f.amountTotal).toFixed(2) : 0,
            businessCount: f ? f.businessCount || 0 : 0
          })
        })
        this.$refs.saleFunnelChart.initChart({
          list,
          title: '',
          sourceData: data
        })
      })
    }

  }
}
</script>
